<template>
  <div>
    <Nav message="3" />
    <van-search
      v-model="value"
      shape="round"
      placeholder="搜索"
      @search="onSearch"
    />

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- bank -->
      <!-- <van-cell
        v-for="(item, index) in list"
        :key="index"
        :title="item.address"
      /> -->

      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="img">
          <img :src="item.img" />
        </div>

        <div class="right">
          <div class="title">
            {{ item.title }}
          </div>

          <div class="price">
            {{ item.price }}
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {
    Nav,
  },
  props: {},
  data() {
    return {
      list: [
        // {
        //   title:"Everblue Wet Wipes with Organic Ingredients and Flower Extracts (6 bags)",
        //   price:"US$1.00",
        //   img:"https://m.media-amazon.com/images/I/71bbrsCiAeL._AC_UY218_.jpg"
        // }
      ],
      loading: false,
      finished: false,
      pageNum: 0,
      value: "咖啡",
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  methods: {
    onSearch() {
      console.log("onSearch");
      console.log(this.value);
      this.finished = false; //开启分页
      this.pageNum = 0;
      this.list = [];
      this.onLoad();
    },
    onLoad() {
      // console.log("进入onLoad")

      this.timer = setTimeout(() => {
        //设置延迟执行
        this.pageNum += 1;

        const _this = this;
        axios
          // .get(this.$api + "search/findAmazonPage", {
          .get(this.$api + "search/findJdPage", {
            params: {
              name: _this.value,
              pageNum: _this.pageNum,
            },
          })
          .then(function (resp) {
            console.log(resp);

            if (resp.data.amazonPage == null) {
              console.log("元素等于null");
              //停止分页请求
              _this.finished = true;
            }

            for (let item of resp.data.amazonPage) {
              _this.list.push(item);
            }
          });

        // 加载状态结束
        this.loading = false;

        console.log(this.pageNum);
        console.log(this.value);
      }, 500);
      // }, 3000);
      // console.log(this.list)

      //es银行bank
      // this.timer = setTimeout(() => {
      //   //设置延迟执行
      //   this.pageNum += 1;

      //   const _this = this;
      //   axios
      //     .get(this.$api + "search/findBankPage", {
      //       params: {
      //         // name:this.value,
      //         pageNum: this.pageNum,
      //       },
      //     })
      //     .then(function (resp) {
      //       console.log(resp);
      //       if (resp.data.page.page == 1) {
      //       }
      //       for (let i = 0; i < 10; i++) {
      //         if (resp.data.page[i] != null) {
      //           _this.list.push(resp.data.page[i]);
      //         } else {
      //           _this.finished = true;
      //         }
      //       }
      //     });

      //   // 加载状态结束
      //   this.loading = false;

      //   console.log(this.pageNum);
      // }, 10);
    },
  },
  created() {
    // const _this = this;
    // axios
    //   .get(this.$api + "search/findBankPage", {
    //     params: {
    //       pageNum: this.pageNum,
    //     },
    //   })
    //   .then(function (resp) {
    //     for (let i = 0; i < 10; i++) {
    //       _this.list.push(resp.data.page[i]);
    //     }
    //   });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //声明周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁之后
  activated() {}, //缓存keep-alive
};
</script>

<style scoped>
.img {
  float: left;
  min-height: 9rem;
  min-width: 9rem;
  /* background: gold; */
  /* background: #f8f8f8; */
}
.img img {
  width: 8.5rem;
}
.title {
  /* background: gray; */
  max-height: 6.3rem;
  overflow:hidden;
  font-size: 0.89rem;
  color: black;
  font-weight: 400;
}
.price {
  float: left;
  font-weight: 700;
  font-size: 0.9rem;
  color: black;
}
.item {
  /* background: hotpink; */
  overflow: hidden;
  margin: 0.5rem 0.5rem 0 0.5rem;
  border-radius: 0.2rem;
  border: 0.1rem solid #eeeeee;
}
.right {
  padding: 0.3rem;
}
</style>